@extends('mobile.common.main')
@section('container')
<style>
    .lbl{
        line-height: .24rem;
        padding: .1rem .4rem .1rem 0;
        color: #242424;
        font-size: .24rem;
        float: left;
    }
    .lbl input.rdo{
        -webkit-appearance: radio;
        -moz-appearance: radio;
        width: .24rem;
        height: .24rem;
        float: left;
        margin-right: .15rem;
    }
</style>
<div class="img-contain">
    <img src="/ace/181010/m_apl1.jpg" alt="">
</div>
<div class="img-contain">
    <img src="/ace/181010/m_apl2.jpg" alt="">
</div>
<div class="img-contain">
    <img src="/ace/181010/m_apl3.jpg" alt="">
</div>
<div class="ty-apply6">
    <div class="tip">前300名下单更有惊喜哦，名额有限先到先得</div>
    <div class="form">
        <ul>
            <li>
                <input class="ipt" id="name" type="text" placeholder="姓名">
            </li>
            <li>
                <input class="ipt" id="phone" type="tel" maxlength="11" placeholder="联系手机">
            </li>
            <li>
                <select id="province">
                    <option value="0">所在省份</option>
                </select>
            </li>
            <li>
                <select id="city">
                    <option value="0">所在地市</option>
                </select>
            </li>
            <li>
                <select id="area">
                    <option value="0">所在区县</option>
                </select>
            </li>
            <li>
                <input class="ipt" id="address" type="text" placeholder="安装地址">
            </li>
            <li style="overflow: hidden">
                <label class="lbl">
                    <input type="radio" name="type" class="rdo" value="1" checked> 自建房
                </label>
                <label class="lbl">
                    <input type="radio" name="type" class="rdo" value="2"> 别墅
                </label>
            </li>
            <li>
                <button class="btn" id="j_applySubmit" type="button">立即申请</button>
            </li>
        </ul>
    </div>
</div>
@endsection
@section('script')
<script>
    (function ($) {
        $.toast = function (options) {
            var $toast = $('#toast');
            var defaults = {
                msg: '', call: function () {
                    $toast.fadeOut(500);
                }
            };
            try {
                if (typeof options === "string" || typeof options === "number") {
                    options = {msg: options};
                }
                var opts = $.extend(defaults, options);
            } catch (e) {
                console.log(e);
            }

            var toastHtml = '<div style="position:fixed;z-index:1000;top:0;right:0;left:0;bottom:0;"></div>' +
                '<div style="position:fixed;z-index:5000;width:60%;top:4rem;left:50%;margin-left:-30%;background:rgba(17,17,17,.7);text-align:center;border-radius:.1rem;color:#FFF;"><p style="padding:.4rem;line-height:1;font-size:.3rem">' + opts.msg + '</p></div>';
            if ($toast && $toast.length > 0) {
                $toast.html(toastHtml);
            } else {
                $('body').append('<div id="toast" style="position:relative;z-index:9000">' + toastHtml + '</div>');
                $toast = $('#toast');
            }
            $toast.fadeIn(500);
            setTimeout(function () {
                opts.call();
            }, 2000);
        };
    })(Zepto);
    (function ($) {
        $(function () {
            new Swiper('.swiper-container', {
                slidesPerView: 1,
                loop: true,
                pagination: {
                    clickable: true,
                    el: '.swiper-pagination'
                },
                navigation: {
                    nextEl: '.swiper-button-next',
                    prevEl: '.swiper-button-prev'
                }
            });

            var areaData = {}, cityData = {}, districtData = {};
            var $name = $('#name');
            var $province = $('#province');
            var $city = $('#city');
            var $area = $('#area');
            var $phone = $('#phone');
            var $address = $('#address');
            $.getJSON('/ace/js/area.json', function (data) {
                areaData = data.data.province;
                initArea();
            });

            function initArea() {
                var provinceOptions = '', province, cityArr, city;
                for (var i = 0, l = areaData.length; i < l; i++) {
                    province = areaData[i];
                    cityArr = province.city;
                    cityData[province.id] = cityArr;
//provinceOptions += '<option value="' + province.id + '">' + province.name + '</option>';
                    if (province.name === '浙江') {
                        provinceOptions += '<option value="' + province.id + '">' + province.name + '</option>';

                        for (var i2 = 0, l2 = cityArr.length; i2 < l2; i2++) {
                            city = cityArr[i2];
                            districtData[city.id] = city.area;
                        }
                        break;
                    }
                }
                var cityOptions = '', cityZJ = cityData[31];
                for (i = 0, l = cityZJ.length; i < l; i++) {
                    cityOptions += '<option value="' + cityZJ[i].id + '">' + cityZJ[i].name + '</option>';
                }
                $('#province').html('<option value="">选择省</option>' + provinceOptions).val(31);
                $('#city').html('<option value="">选择市</option>' + cityOptions);
            }

//选择省
            $province.on('change', function () {
                var cityArr = cityData[$(this).val()], cityOptions = '', city;
                if (cityArr && cityArr.length > 0) {
                    for (var i = 0, l = cityArr.length; i < l; i++) {
                        city = cityArr[i];
                        cityOptions += '<option value="' + city.id + '">' + city.name + '</option>';
                    }
                }
                $('#city').html('<option value="">所在地市</option>' + cityOptions);
                $('#area').html('<option value="">所在区县</option>');
            });

//选择市
            $city.on('change', function () {
                var areaArr = districtData[$(this).val()], areaOptions = '', area;
                if (areaArr && areaArr.length > 0) {
                    for (var i = 0, l = areaArr.length; i < l; i++) {
                        area = areaArr[i];
                        areaOptions += '<option value="' + area.id + '">' + area.name + '</option>';
                    }
                }
                $('#area').html('<option value="">所在区县</option>' + areaOptions);
            });

//申请电站表单提交
            $('#j_applySubmit').on('click', function () {
                if (!$province.val()) {
                    $.toast('请选择所在省份');
                    return false;
                }
                if (!$name.val()) {
                    $.toast('请输入姓名');
                    return false;
                }
                if (!$phone.val()) {
                    $.toast('请输入联系手机');
                    return false;
                } else {
                    var reg = /^0?(13|14|15|17|18)[0-9]{9}$/;
                    if (!reg.test($phone.val())) {
                        $.toast({
                            msg: '联系手机格式错误', call: function () {
                                $('#toast').fadeOut(500);
                                $phone.focus();
                            }
                        });
                        return false;
                    }
                }
                if (!$address.val()) {
                    $.toast('请输入安装地址');
                    return false;
                }
                var paras = {};
                paras['province'] = parseInt($province.val());
                paras['city'] = parseInt($city.val()) || 0;
                paras['area'] = parseInt($area.val()) || 0;
                paras['phone'] = $phone.val();
                paras['name'] = $name.val();
                paras['address'] = $province.find('option:selected').text() + ' ' + $city.find('option:selected').text() + ' ' + $area.find('option:selected').text() + ' ' + $address.val();
                paras['house_type'] = parseInt($('[name="type"]:checked').val());
                var $t = $(this);
                if (!$t.hasClass('dis')) {
                    $t.addClass('dis');
                    $.ajax({
                        url: 'http://api.crm.tanwin.cn/project/apply',
                        data: paras,
                        type: "POST",
                        dataType: "json",
                        async: false,
                        success: function (data) {
                            $t.removeClass('dis');
                            if (data && data.code === 100) {
                                $.toast('提交成功！');
                            } else {
                                $.toast(data.msg);
                            }
                        },
                        error: function () {
                            $t.removeClass('dis');
                        }
                    });
                }
            });
        });
    })(Zepto);
</script>
@endsection
